<template>
  <div class="profile">
    <!--    头部-->
    <nav-bar class="profile-nav">
      <div slot="center">蘑菇街商城</div>
    </nav-bar>
    <!--    登录部分-->
    <section class="user arrow-right">
      <div class="avatar">
        <img src="~assets/img/profile/avatar.svg" alt="">
      </div>
      <div class="user-detail">
        <div>登录/注册</div>
        <div><i class="phone"></i>暂无绑定手机号</div>
      </div>
    </section>
    <!--    账户部分-->
    <section class="acount">
      <div>
        <span><span class="tint">0.00</span>元</span>
        <span>我的余额</span>
      </div>
      <div>
        <span><span class="tint">0</span>个</span>
        <span>我的优惠</span>

      </div>
      <div>
        <span><span class="tint">0</span>分</span>
        <span>我的积分</span>
      </div>
    </section>
    <!--    列表部分-->
    <list-view :list="list1"></list-view>
    <list-view :list="list2"></list-view>
  </div>

</template>

<script>

// 引入公共组件
import NavBar from "@/components/common/navbar/NavBar";
import ListView from "@/components/content/listview/ListView";

export default {
  name: "My",
  components: {
    ListView,
    NavBar
  },
  data() {
    return {
      list1: [
        {class: 'message', info: '我的消息'},
        {class: 'pointer',info: '积分商城'},
        {class: 'vip', info: '会员卡'},
      ],
      list2:[
        {class: 'cart', info: '我的购物车'},
        {class: 'shopping',info: '下载购物APP'},
      ]
    }
  }
}
</script>

<style scoped>
.profile {
}

.profile .profile-nav {
  background-color: var(--color-tint);
  color: #fff;
}

/*用户部分*/
.profile .user {
  padding: 10px;
  display: flex;
  background-color: var(--color-tint);
  color: #fff;
}

.profile .user .avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.profile .user .avatar img {
  width: 100%;
}

.profile .user .user-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
  margin-left: 10px;
}

/*账户部分*/
.profile .acount {
  display: flex;
  height: 85px;

}

.profile .acount > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #F3F3F3;
  height: 100%;
}

.profile .acount > div span {
  margin-top: 5px;
}

/*公共样式*/
.phone {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 20px;

}

.phone::after {
  position: absolute;
  top: 20%;
  right: 0;
  content: '';
  background: url("~assets/img/profile/phone.svg") no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  color: #fff;
}

/*箭头样式*/
.arrow-right {
  position: relative;
}

.arrow-right:after {
  position: absolute;
  right: 20px;
  top: 50%;
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translateY(-50%);
}

.tint {
  color: var(--color-high-text);
  font-weight: 600;
  font-size: 20px;
}
</style>
